import React, { Component } from 'react'
import '../../App.css'

import Child from './child'

/**
 * 主要用于生产环境。开发环境也会触发，但页面还是会有报错
 * 注意：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
 * 场景：项目上线后，数据渲染出现问题，由getDerivedStateFromError捕获错误，在componentDidCatch进行统计反馈给服务器，通知编码人员进行bug修改
 */
export default class A extends Component {
    state = {
        hasError: ''   // 标识子组件是否产生错误
    }

    // 子组件出现错误时，会触发派生钩子调用，会携带错误信息
    static getDerivedStateFromError(err) {
        console.log('@err', err);
        return { hasError: err }
    }

    // 组件渲染过程中，由子组件出现了问题触发下面钩子
    componentDidCatch(error, info) {
        // 统计页面的错误。发送请求发送到后台去
        console.log('componentDidCatch',error, info);
    }

    render() {
        return (
            <div className='a'>
                <h2>我是父组件</h2>
                {/* <Child></Child> */}
                {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child />}
            </div>
        )
    }
}
